<template>
    <div class="hBox vh-content-center" style="width: 100%;position: relative">
        <div class="header font-size-x font-weight-large hBox vh-content-center vh-items-center">
            新都区城市安全清单制管理平台
        </div>
        <!-- 全屏显示 -->
        <div class="header-left-full-screen hBox vh-items-center" @click="handleFullScreen">
                <img class="mr8" v-if="fullscreen" src="../assets/img/esc-fullscreen.png"/>
                <img class="mr8" v-if="!fullscreen" src="../assets/img/fullscreen.png"/>
        </div>
    </div>
</template>
<script>
import bus from '../common/bus';
import {mapMutations} from 'vuex';

export default {
    data () {
        return {
            fullscreen: false,
            name: 'admin',

        };
    },
    computed: {},
    mounted () {
        let me = this;
        window.addEventListener('resize', () => {
            me.fullscreen = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
        });
        // this.init();
        // me.initInterval = setInterval(() => {
        //     this.init();
        // }, 1000 * 60 * 2);
    },
    methods: {
        ...mapMutations(['setFirstData', 'setCoalData', 'setChemicalData']),
        // 全屏事件
        handleFullScreen () {
            let element = document.documentElement;

            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            }
            else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                }
                else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                }
                else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                }
                else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            this.fullscreen = !this.fullscreen;
        },
        goto (type) {
            let token = localStorage.getItem('Authorization');
            if (type === 'coal') {
                window.open('http://fm.yzt.scdem.cn?Authorization=' + token);
            }
            else if (type === 'chemical') {
                window.open('http://wh.yzt.scdem.cn/auth-redirect?Authorization=' + token);
            }
        },
        init () {
            this.getFirstData();
            this.getCoalData();
            this.getChemicalData();
        },
        async getFirstData () {
            let me = this;
            let res;
            try {
                res = await this.$req.get(this.$url.first);
                console.log(res);
                if (res.code == 200) {
                    me.setFirstData({ data: res.data });
                }
                else {
                    console.log(res);
                }
            }
            catch (err) {
                console.log(err);
            }
        },
        async getCoalData () {
            let me = this;
            let res;
            try {
                res = await this.$req.get(this.$url.coal);
                console.log(res);
                if (res.code == 200) {
                    me.setCoalData({ data: res.data });
                }
                else {
                    console.log(res);
                }
            }
            catch (err) {
                console.log(err);
            }
        },
        async getChemicalData () {
            let me = this;
            let res;
            try {
                res = await this.$req.get(this.$url.chemical);
                console.log(res);
                if (res.code == 200) {
                    me.setChemicalData({ data: res.data });
                }
                else {
                    console.log(res);
                }
            }
            catch (err) {
                console.log(err);
            }
        }
    },
    destroyed () {
        bus.$off();
    }
};
</script>
<style lang="scss" scoped>

    .header {
        box-sizing: border-box;
        width: 1863px;
        height: 76px;
        background: url("../assets/img/9.png") center no-repeat;
        background-size: contain;
        z-index: 1000;

    }
    .header-left-full-screen {
        cursor: pointer;
        position: absolute;
        right: 40px;
        top:0px;
        height: 76px;
        z-index: 1000;
        img {
            height: 18px;
            width: 18px;
        }
    }

</style>

